<template>
  <div v-if="$store.getters['user/isLogin']">
    <div class="box">
      <div class="content" >
        <div class="avatar">
          <img src="../assets/images/avatar_default.png" alt="">
        </div>
        <span>{{ $store.state.user.username }}</span>
      </div>
    </div>

    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
        <router-link :to="{name: 'order_list'}" class="mui-navigate-right">
          <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />
          <div class="mui-media-body">
            我的订单
          </div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media">
        <router-link to="/user/address" class="mui-navigate-right">
          <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />
          <div class="mui-media-body">
            收货地址
          </div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media" @click="logout">
        <a href="javascript:;" class="mui-navigate-right">
          <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />
          <div class="mui-media-body">
            退出登录
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="box" v-else>
    <div class="content">
      <router-link to="/user/login">
        <div class="avatar">
          <img src="../assets/images/avatar_default.png" alt="">
        </div>
        <span>登入 / 注册</span>
      </router-link>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  created() {
    
  },
  methods: {
    // 退出登录
    logout() {
      this.$http.get('logout').then(res => {
        // 将localStorage里的Authorization干掉
        this.$auth.setAuthorization("")
        // 将Vuex中的用户信息删除
        this.$store.commit('user/logout')
        this.$toast('退出成功!')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 20px;
  .content {
    height: 120px;
    margin: 15px;
    border-radius: 10px;
    background-image: linear-gradient(270deg,#ffe259,#ffa751);
    position: relative;
    margin-bottom: 15px;
    background-color: #fff;
    .avatar {
      width: 70px;
      height: 70px;
      background-color: transparent;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      border-radius: 50%;
      box-shadow: -0.1rem 0.2rem 0.5rem rgba($color: #000000, $alpha: .5);
      img {
        width: 100%;
      }
    }
    span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 110px;
      font-size: 18px;
      color: #000;
    }
  }
}
.mui-table-view-cell > a:not(.mui-btn).mui-active {
  background-color: #fff;
}
.mui-table-view .mui-media .mui-media-body {
  line-height: 42px;
  text-align: left;
}
.mui-table-view-cell:after {
  left: 0;
}
</style>